<template>
  <div>
    <h2>电影详情</h2>
    <p>名称: {{ info.name }}</p>
    <p>
      海报:
      <img :src="info.poster" alt="" style="width: 200px" />
    </p>
    <!-- 
      下面的代码会报错, xxx of undefined 这种错.
      原因是:
        接口是异步请求,当接口还未请求完成时,组件已经是渲染了这时的 info 数据是一个空对象 {}
      解决方法:
        1. 使用 ES10 中的 可选链 语法
            <p>几D: {{ info.filmType?.name }}</p>
        2. 使用 三元运算
            <p>几D: {{ info.filmType ? info.filmType.name : '' }}</p>
        3. 使用 &&
            <p>几D: {{ info.filmType && info.filmType.name }}</p>
        4. 使用 v-if 
            <p v-if="info.filmType">几D: {{ info.filmType.name }}</p>
     -->
    <!-- <p>几D: {{ info.filmType.name }}</p> -->
    <p v-if="info.filmType">几D: {{ info.filmType.name }}</p>

    <hr />

    <h2>猜你喜欢</h2>
    <!-- 
      问题:
        点击跳转到 芭比 的电影详情页面, 但是页面的数据没有更新.
      原因是: 当从一个详情页面直接进入另一个详情页面,只有参数发生变化时, Vue 认为相比较将当前组件卸载再重新创建而言缓存更合适,于是它就把组件缓存了.
      解决方案:
        1. 监听 $route 的变化
        2. 使用 组件内的路由守卫 beforeRouteUpdate
     -->
    <RouterLink to="/film/6455">芭比</RouterLink>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      info: {},
    };
  },

  watch: {
    // $route(newVal) {
    //   console.log("$route 改变了", newVal);
    //   // 获取到最新的 id
    //   const { filmId } = newVal.params;
    //   // 重新调用 fetchData
    //   this.fetchData(filmId);
    // },
  },

  methods: {
    // 请求数据
    fetchData(id = 6429) {
      axios
        .get("https://m.maizuo.com/gateway", {
          params: {
            filmId: id, // 电影Id
            k: 9411747, // 随机数
          },
          headers: {
            "X-Host": "mall.film-ticket.film.info",
          },
        })
        .then(({ data }) => {
          console.log("data", data);
          // 判断业务状态码
          if (data.status !== 0) {
            alert(data.msg);
            return;
          }

          // data.data.film => this.info
          this.info = data.data.film;
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },

  mounted() {
    console.log("mounted");
    // 获取当前的 id
    const { filmId } = this.$route.params;

    this.fetchData(filmId);
  },

  /**
   * 路由更新的守卫钩子函数
   * @param {*} to 去那个路由
   * @param {*} from 来自那个路由
   * @param {*} next 一个函数,用于控制是否放行.
   */
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate - to", to);
    console.log("beforeRouteUpdate from", from);

    next(); // 放行

    // 获取到最新的 id
    const { filmId } = to.params;
    // 重新调用 fetchData
    this.fetchData(filmId);
  },
};
</script>
